<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<title></title>
<#include "style.ftl" />
<script type="text/javascript">
//选项卡
function setTab(name,cursel,n){
	for(i=1;i<=n;i++){
		var menu=document.getElementById(name+i);
		var con=document.getElementById("con_"+name+"_"+i);
		menu.className=i==cursel?"hover":"";
		con.style.display=i==cursel?"block":"none";
	}
}
</script>
</head>
<body>
<div class="hdbox">
  <div class="hdbox0">
    <div class="hdbox_1"><a onclick="javascript:history.back(-1)" class="goback"><img src="${staticPath}front/images/goback.png"></a></div>
    <div class="hdbox_2">
      <ul>
      <li class="on"><a href="#m1">商品</a></li>
      </ul>
    </div>
    <div class="hdbox_3">
      <a onclick="javascript:history.back(-1)"><img src="${staticPath}front/images/h2.png" /></a>
      <a href="${basePath}home/cart"><img src="${staticPath}front/images/h1.png" /></a>
    </div>
  </div>
</div>
<div class="hbox"></div>
<a name="m1">
<div class="xqbox1">
  <img src="${imagesPath}${product.logo!}" width="100%"/>
  <p class="tit">${product.name!}</p>
  <div class="qita">
    <p class="p1">￥${product.price!}<span>新品促销</span></p>
    <p class="p2">销量${product.sold2}</p>
  </div>
</div>
</a>

<div class="clear"></div>
<div class="kbox"></div>
<div class="xqbox2 sizetype">
  <div class="xqbox2L">
    <span>请选择属性</span>
  </div>
  <div class="xqbox2R">
    <img src="${staticPath}front/images/more.png">
  </div>
</div>
<div class="clear"></div>
<div class="kbox"></div>
<div class="clear"></div>
<div class="kbox"></div>
<div class="clear"></div>
<div class="kbox"></div>
<div class="clear"></div>
<a name="m2"><div class="kbox"></div></a>

<div class="xqtab">
  <div class="Menubox">
    <ul>
      <li class="hover" onclick="setTab('two',1,3)" id="two1">详情</li>
    </ul>
  </div>
  <div class="Contentbox">
    <div id="con_two_1">
      <div class="xqsub">
        ${product.introduction!}
      </div>
    </div>
  </div>
</div>
<div class="clear"></div>
<div class="xqbotbox">
  <div class="xqbotbox0">
    <div class="xqbotboxL">
      <ul>
        <li>
          <a href="javascript:void()">
          <img src="${staticPath}front/images/xqf1.png" />
          <p>客服</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="xqbotboxR">
      <a class="a2 sizetype" data-type="sku">立即购买</a>
      <a class="a1 sizetype" data-type="cart">加入购物车</a>
    </div>
  </div>
</div>
<div class="xzsize">
  <div class="xzsize0">
    <div class="f_mask0"></div>
    <div id="size">
      <div class="size1">
        <div class="size1_1">
          <img src="${imagesPath}${product.logo!}" />
        </div>
        <div class="size1_2">
          <p class="p1">￥${product.price!}</p>
        </div>
        <div class="size1_3">
          <img src="${staticPath}front/images/close.png" />
        </div>
      </div>
      <div class="size2">
        <div class="size2_1">
          <p class="tit">${product.attrName!}</p>
        </div>
        <div class="size2_1">
          <#list skuList as sku>
            <a href="javascript:void()" id="sku" class="sku on" data-id="${sku.id!}">${sku.name!}</a>
          </#list>
        </div>
        <div class="size2_1">
          <p class="tit">数量</p>
          <div class="lnums">
            <div class="num1" onclick="phNum(-1)">-</div>
            <div class="num2" id="cartNum">1</div>
            <div class="num3" onclick="phNum(1)">+</div>
          </div>
        </div>
      </div>
      <div class="size3">
        <a href="javascript:confirmSku()">确定</a>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  var isLogin=false;
  function checkLogin(){
    jQuery.post("${basePath}isLogin", {},function(result){
      if(result.success){
        isLogin = true;
      }
    });
  }
  var buyMethod = '';
  $(document).ready(function () {
    checkLogin();
    //选择尺寸
    $('.sizetype').click(function(){
      if(!isLogin){
        document.location.href="${basePath}login?lastpage=/product/${product.id!}";
        return;
      }
      $("#size").animate({bottom:"0"},500);
      $('.f_mask0').show();
      $("body").css({'height':'100%','overflow':'hidden'});
      buyMethod = $(this).data('type');
    })
    $('.size3 a').click(function(){
      $('.f_mask0').hide();
      $('#size').animate({bottom:"-80%"},500);
      $("body").css({'height':'auto','overflow':''});
    })

    $('.size1_3 img').click(function(){
      $('.f_mask0').hide();
      $('#size').animate({bottom:"-80%"},500);
      $("body").css({'height':'auto','overflow':''});
    })

    //
    $('.hdbox_2 ul li').click(function(){
      $('.hdbox_2 ul li').removeClass('on');
      $(this).addClass('on');
    })
  })
  function phNum(num){
    var cartNum = $('#cartNum').html();
    if(num == 1){
      cartNum = parseInt(cartNum) + 1;
    }else{
      cartNum = parseInt(cartNum) - 1;
    }
    if(cartNum <=1){
      cartNum = 1;
    }
    $('#cartNum').html(cartNum);
  }
  function confirmSku(){
    var skuId = $('.sku.on').data('id');
    console.info(skuId);
    if(skuId){
      var cartNum = $('#cartNum').html();
      if(buyMethod=='cart'){
        jQuery.post("${basePath}home/cartItem/add", {'qty':cartNum,'skuId':skuId},function(result){
          if(result.success){
          }else {
            alert(result.msg);
          }
        });
      }else if(buyMethod=='sku'){
        location.href = "${basePath}home/settle/product?skuId="+skuId+"&qty="+cartNum;
      }
    }
  }
</script>
</html>
